const loginForm = document.getElementById("login");

const loginButton = document.querySelector('.loginbutton');
const registerButton = document.querySelector('.registerbutton');
const rememberCheck = document.getElementById('exampleCheck1')
const usernameInput = document.getElementById('exampleInputEmail1')
const passwordInput = document.getElementById('exampleInputPassword1')
const savedUsername = localStorage.getItem('username');
const savedPassword = localStorage.getItem('password');

if (savedUsername) {
  usernameInput.value = savedUsername
}
if (savedPassword) {
  passwordInput.value = savedPassword
}
if (savedUsername && savedPassword) {
  rememberCheck.checked = true
}
loginButton.addEventListener('click', (e) => {
  e.preventDefault()
  
  const emailInput = document.getElementById("exampleInputEmail1").value;

  if (emailInput.length === 0) {
    showQuestion("请输入用户名", "warning");
    return;
  }
  const passwordInput = document.getElementById("exampleInputPassword1").value;
  if (passwordInput.length < 6) {
    showQuestion("密码要大于6位数", "warning");
    return;
  }
  const data = { username: emailInput, password: passwordInput };
  axios({
    url: 'http://localhost:8080/login',
    method: "post",
    data
  }).then(result => {
    let type = result.data.data === "登录成功" ? "success" : "warning";
    showQuestion(result.data.data, type);
    if (result.data.data === "登录成功") {
      if (savedUsername && savedPassword) {
        document.getElementById("exampleInputEmail1").value = savedUsername; // 自动填充用户名
        document.getElementById("exampleInputPassword1").value = savedPassword; // 自动填充密码
      }
      if (rememberCheck.checked) {
        console.log(data.username);
        axios({
          url:`http://localhost:8080/getUsernameInfo?username=${emailInput}`,
          method:"get",
        }).then(result => {
          console.log("返回值"+result.data.data);
          localStorage.setItem('imageFile', result.data.data.image);
        })
        localStorage.setItem('username', emailInput);
        setTimeout(()=> {
          window.location.href='./html/home.html'
        },2000)
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
      }
    }
  }).catch(error => {
    console.log(error);
  });
});


registerButton.addEventListener('click',()=> {
  window.location.href = "./html/zhuce.html"
})
function showQuestion(text, statusType) {
  const alertPlaceholder = document.getElementById('alertContainer');

  function alert(message, type) {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = [
      `<div class="alert alert-${type} alert-dismissible" role="alert">`,
      `   <div>${message}</div>`,
      '</div>'
    ].join('');

    alertPlaceholder.append(wrapper);

    setTimeout(() => {
      wrapper.classList.add('show');
    }, 100);

    // 3秒后开始逐渐消失
    setTimeout(() => {
      wrapper.classList.remove('show');
      wrapper.classList.add('fadeOut');
    }, 3000);

    // 5秒后移除元素
    setTimeout(() => {
      wrapper.remove();
    }, 5000);
  }

  alert(text, statusType);
}